<template>
  <div>
    <section class="cars-item" @click="getCarsInfo">
      <header>
        <h4 class="cars-logo">
          <img :src="carInfo.imgUrl">
          <span class="name">{{carInfo.carsMode}}</span>
        </h4>
        <p class="car-attr">
          {{carInfo.carsAttr | energyType}}
          {{carInfo.carsAttr | seat}}座</p>
      </header>
      <div class="cars-content">
        <div class="info">
          <div>
            <h4>{{carInfo.carsNumber}}</h4>
            <ul class="car-electric" :class="carInfo.electric | electricNumber" >
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
              <li></li>
            </ul>
          </div>
          <div class="road">
            <span>约</span>
            <strong>{{carInfo.countKm}}</strong>
            <span>KM</span>
          </div>
        </div>
        <img :src="carInfo.carsImg" :onerror="defaultImg">
      </div>
      <footer>
        <a href="#" class="cars-link">{{carInfo.parkingName}}</a>
      </footer>
    </section>
    <section class="cars-item cars-detail" :style="'height:'+ cars_info_height" v-if="cars_info_show">
      <div class="scroll">
        <h4 class="column">{{carInfo.parkingName}}
        <i class="close" @click="handleClose"></i>
      </h4>
      <header style="margin-top: 16px">
        <h4 class="cars-logo">
          <img :src="carInfo.imgUrl">
          <span class="name">{{carInfo.carsMode}}</span>
        </h4>
        <p class="car-attr">{{carInfo.carsAttr | energyType}} {{carInfo.carsAttr | seat}}座</p> 
      </header>
      <img
        src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2804270434,2028594764&fm=26&gp=0.jpg"
        alt=""
        style="width:100%;height:200px"> 
      <div class="car-id">
        <h4 class="fs-24">{{carInfo.carsNumber}}</h4>
        <div class="road2">
          <span>约</span>
          <strong>{{carInfo.countKm}}</strong>
          <span>KM</span>
        </div>
      </div>
      <div class="car-electric-box">
        <div class="p-r">
          <span class="e-high p-a" :style="`width:${Math.round(carInfo.electric / 10)}px`"></span>
          <span class="e-bg"></span>
        </div>
      </div>
      <p class="info color-main text-center">取车约支付12元停车费，实际补贴12元</p>
      <ul class="cars-type-list" >
        <li :class="{'current':leaseId == item.carsLeaseTypeId}" v-for="item in leaseListData" :key="item.carsLeaseTypeId" @click="selectLeaseType(item)">
          <h4 class="name">{{item.carsLeaseTypeName}}</h4>
          <span>¥{{item.price}}</span>
        </li>
      </ul>
      <div class="clause-des">
        <span>参保《全面保障服务》用车更放心</span>
        <i class="current" ></i>
      </div>
      </div>
      <div class="select-car-btn p-a" @click="confirmCars">预约车辆</div>
    </section>
  </div>
</template>

<script>
import {getCarsAttrkey} from "@/utils/format.js";
import {GetLeaseList,ConfirmCars} from "@/api/cars.js";

export default {
  name: "CarsList",
  props: {
    // height: {
    //   type: String,
    //   default: "257px"
    // },
    carInfo: {type:Object, default:()=>{}}
  },
  filters: {
    electricNumber(val) {
      const num = Math.round(val / 10);
      return `active-li-${num}`;
    },
    energyType(val) {
      return getCarsAttrkey({
        data: val,
        parentKey: "basics",
        childKey: "energy_type"
      });
    },
    seat(val) {
      return getCarsAttrkey({
        data: val,
        parentKey: "basics",
        childKey: "seat"
      });
    }
  },
  data() {
    return {
      defaultImg: 'this.src="' + require('../../assets/pear.png') + '"',
      cars_info_show: false,
      cars_info_height: 0,
      timer: null,
      leaseListData: [],
      leaseId: "",
      token: this.$store.state.account.tokenkey,
      message_item: this.$store.state.config.message_item,
      backup_key: "",
      audit_status:["check_real_name","check_cars","gilding","illegalAmount"]
    }
  },
  mounted() {
    // console.log(this.carInfo)
  },
  methods: {
    confirmCars() {
      if(!this.token) { // 没有登录需要先登录
        this.$router.push({name:"Login"})
      }
      if(!this.leaseId) {
        return this.$message({
          type: "error",
          message: "请选择租车类型"
        })
      }
      ConfirmCars({
        cars_id: this.carInfo.id,
        cars_lease_type_id: this.leaseId
      }).then((res) => {
        const data = res.data;
        if(!data) {
          this.$message({
            type: "success",
            message: res.message
          })
          return window.location.reload();
        }
        const key = Object.keys(data) ? Object.keys(data) : "";
        if(key && key.length > 0) {
          if(this.audit_status.includes(key[0])) {
            let message = "";
            this.backup_key = key[0];
            let msg = this.message_item[key[0]].msg;
            msg && (message = msg)
            this.$confirm(message, '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              let router = this.message_item[this.backup_key].router;
              if(router) {
                this.$router.push({
                  path: router,
                  query: {
                    type: this.message_item[this.backup_key].type
                  }
                })
              }
            })
          }
        }
      })
    },
    selectLeaseType(data) {
      this.leaseId = data.carsLeaseTypeId;
    },
    getCarsInfo() {
      this.handleOpen();
    },
    handleOpen() {
      // 获取到页面可视区高度,进行高度控制
      const viewHeight = document.documentElement.clientHeight || document.body.clientHeight;
      const height = viewHeight - 145;
      this.cars_info_show = true;
      if(this.timer) {
        clearTimeout(this.timer); // 防止连续点击，会开启多个定时器
      }
      this.timer = setTimeout(() => {
        this.cars_info_height = `${height}px`;
        clearTimeout(this.timer);
      },10);
      this.getLeaseList();
    },
    handleClose() {
      this.cars_info_height = "0";
      this.timer = setTimeout(() => {
        this.cars_info_show = true;
        clearTimeout(this.timer);
      },10);
    },
    getLeaseList() {
      if(this.leaseListData && this.leaseListData.length > 0) {
        return false;
      }
      GetLeaseList({carsId:this.carInfo.id}).then((res) => {
        if(res.data) {
          this.leaseListData = res.data.data;
        }
      })
    }

  }
};
</script>

<style lang="scss" scoped>
.cars-item {
    background-color: #fff;
    border-radius: 24px;
    height: 257px; 
    @include webkit(box-shadow, 0 0 18px 0 rgba(0,0,0,0.2));
    @include webkit(box-sizing, border-box);
    padding: 30px 30px 0 30px;
    margin: auto;
    header {
      display: flex;
      h4, p {
        flex: 1;
      }
      .cars-logo {
        img {
          display: inline-block;
          height: 34px;
          vertical-align: middle;
          margin-right: 10px;
        }
        .name {
          font-size: 16px;
        }
      }
      .car-attr  {
        text-align: right;
        opacity: 0.5;
        line-height: 34px;
      }
    }
    .cars-content {
      margin: 11px 0 7px 0;
      display: flex;
      align-items: center;
      img {
        height: 120px;
      }
      .info {
        flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        .car-electric {
          display: flex;
          @for $i from 1 through 10 {
            &.active-li-#{$i} {
              li:nth-child(-n+#{$i}) {
                background: linear-gradient( #17a8fa,#108dd9);
              }
            }
          }
          li {
            width: 7px;
            height: 24px;
            border-radius: 100px;
            margin-right: 3px;
            background-color: #e1e1e1;
            margin-top: 10px;
          } 
        }
      }
    }
    .cars-link {
      position: relative;
      display: block;
      border-top: 1px solid #e1e1e1;
      color: $color-main;
      opacity: 0.8;
      line-height: 53px;
      &:after {
        content: "";
        position: absolute;
        top: 50%;
        margin-top: -8px;
        right: 0;;
        border-top: 1px solid #d6d7d9;
        border-right: 1px solid #d6d7d9;
        width: 8px;
        height: 8px;
        @include webkit(transform, rotate(45deg));
      }
    }
  }
  .cars-detail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-top: 0;
    height: 0;
    @include webkit(transition, all .3s ease 0s);
    .scroll {
      overflow-y: auto;
      height: 100%;
    }
    .column {
      position: relative;
      padding: 26px 0 20px;
      // margin-top: 19px;
      font-size: 20px;
      color: #34393f;
      border-bottom: 1px solid #e1e1e1;
      .close {
        display: block;
        width: 26px;
        height: 26px;
        position: absolute;
        right: 0;
        top: 25px;
        cursor: pointer;
        &:before, &:after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          margin-top: -10px;
          margin-left: -1px;
          height: 20px;
          border-left: 2px solid #999c9f;
        }
        &:before {
          @include webkit(transform, rotate(45deg));
        }
        &:after {
          @include webkit(transform, rotate(-45deg));
        }

      }
    }
    .car-id {
      display: flex;
      justify-content: space-between;
      .road2 {
        strong {
          font-size: 22px;
          margin: 0 6px;
        }
        span {
          opacity: 0.5;
        }
      }
    } 
    .car-electric-box {
      margin-top: 17px;
      padding: 15px;
      border-radius: 100px;
      background-color: #fff;
      @include webkit(box-shadow,0 0 10px 0 rgba(0,0,0,.1));
      .e-bg {
        display: block;
        height: 8px;
        background-color: #e1e1e1;
        border-radius: 100px;
      }
      .e-high {
        left: 0;
        top: 0;
        background-color: #0f9cee;
        height: 100%;
        border-radius: 100px;
      }
    }
    .info {
      margin: 32px 0 28px;
    }
    .cars-type-list {
      li {
        height: 43px;
        padding: 0 17px 0 20px;
        background-color: #f3f3f3;
        border-color: #f3f3f3;
        border-style: solid;
        border-width: 2px;
        border-radius: 10px;
        font-size: 16px;
        line-height: 43px;
        display: flex;
        justify-content: space-between;
        margin-bottom: 15px;
        &.current {
          border-color: #0f9cee;
        }
      }
    }
    .clause-des {
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        width: 20px;
        height: 20px;
        border-radius: 100px;
        background-color: #ccc;
        &.current {
          background-color: $color-main;
        }
        &::before {
          display: block;
          content: "";
          width: 8px;
          height: 4px;
          border-left: 2px solid #fff;
          border-bottom: 2px solid #fff;
          @include webkit(transform, rotate(-45deg));
          margin: 6px 0 0 5px;

        }
      }
    }
    .select-car-btn {
      bottom: -42px;
      left: 50%;
      margin-left: -120px;
    }
  }
</style>